import 'package:flutter/material.dart';
import 'package:get/get.dart';

class CustomDrawer extends StatefulWidget {
  final VoidCallback? onDrawerOpened;
  final VoidCallback? onDrawerClosed;
  final VoidCallback? onRefresh;

  const CustomDrawer(
      {Key? key, this.onDrawerOpened, this.onDrawerClosed, this.onRefresh})
      : super(key: key);

  @override
  // ignore: library_private_types_in_public_api
  _CustomDrawerState createState() => _CustomDrawerState();
}

class _CustomDrawerState extends State<CustomDrawer>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _scaleAnimation;
  late Animation<double> _opacityAnimation;
  late Animation<double> _positionAnimation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 500),
    );
    _scaleAnimation = Tween<double>(begin: 10.0, end: 0.9).animate(
      CurvedAnimation(parent: _controller, curve: Curves.easeInOut),
    );

    _opacityAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(
      CurvedAnimation(parent: _controller, curve: Curves.easeInOut),
    );
  }

  @override
  Widget build(BuildContext context) {
    return GetBuilder<CustomDrawerController>(
      init: CustomDrawerController(),
      builder: (contorller) {
        return Column(
          children: [
            Obx((){
              if(contorller.isShowNavBtn.value){
                _controller.forward();
              }else{
                _controller.reverse();
              }
              return Container();
            }),
            //带进场动画的按钮
            InkWell(
              onTap: () {
                print('点击了');
              },
              onTapDown: (_) {
                _controller.reverse();
              },
              child: AnimatedBuilder(
                animation: _controller,
                builder: (context, child) {
                  return Opacity(
                    opacity: _opacityAnimation.value,
                    child: Transform.scale(
                      scale: _scaleAnimation.value,
                      child: child,
                    ),
                  );
                },
                child: Container(
                  height: 70,
                  width: 70,
                  decoration: const BoxDecoration(
                    color: Colors.blue,
                    borderRadius: BorderRadius.all(Radius.circular(50)),
                  ),
                  child: const Icon(
                    Icons.navigation_outlined,
                    color: Colors.white,
                  ),
                ),
              ),
            ),
            const SizedBox(height: 10),
            GestureDetector(onVerticalDragUpdate: (details) {
              contorller.drawerHeight.value -= details.delta.dy;

              contorller.isDrawerOpen.value =
                  contorller.drawerHeight.value > 210;

              if (contorller.drawerHeight.value < 70) {
                contorller.drawerHeight.value = 70;
              }

              if (contorller.drawerHeight.value > 230) {
                contorller.drawerHeight.value = 230;
              }
              // setState(() {});
              // if (contorller.drawerHeight.value == 0 && widget.onDrawerClosed != null) {
              //   widget.onDrawerClosed!();
              // } else if (_drawerHeight.value == 300 &&
              //     widget.onDrawerOpened != null) {
              //   widget.onDrawerOpened!();
              // }
            }, child: Obx(() {
              return Container(
                  decoration: const BoxDecoration(
                      borderRadius: BorderRadius.all(Radius.circular(15)),
                      color: Color.fromARGB(255, 250, 250, 250)),
                  // duration: const Duration(milliseconds: 1),
                  height: contorller.drawerHeight.value,
                  child: Column(
                    children: [
                      Container(
                        margin: const EdgeInsets.only(top: 10, bottom: 10),
                        width: 100,
                        height: 10,
                        decoration: const BoxDecoration(
                            color: Colors.black12,
                            borderRadius:
                                BorderRadius.all(Radius.circular(10))),
                      ),
                      Padding(
                          padding: const EdgeInsets.fromLTRB(20, 10, 20, 0),
                          child: Obx(() {
                            return contorller.isDrawerOpen.value
                                ? Container(
                                    padding: const EdgeInsets.fromLTRB(
                                        20, 15, 20, 15),
                                    decoration: BoxDecoration(
                                      borderRadius: BorderRadius.circular(10),
                                      color: Colors.white,
                                    ),
                                    child: Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.spaceBetween,
                                      children: [
                                        InkWell(
                                          onTap: () {
                                            contorller.isBusSelected.value =
                                                !contorller.isBusSelected.value;
                                          },
                                          child: Column(
                                            children: [
                                              Container(
                                                  width: 80,
                                                  height: 80,
                                                  padding:
                                                      const EdgeInsets.all(10),
                                                  decoration:
                                                      const BoxDecoration(
                                                    borderRadius:
                                                        BorderRadius.all(
                                                            Radius.circular(
                                                                50)),
                                                    color: Color.fromARGB(
                                                        255, 240, 240, 240),
                                                  ),
                                                  child: contorller
                                                          .isBusSelected.value
                                                      ? Image.asset(contorller
                                                          .busIconSelectedPath)
                                                      : Image.asset(contorller
                                                          .busIconPath)),
                                              const SizedBox(
                                                height: 5,
                                              ),
                                              const Text(
                                                "公交",
                                                style: TextStyle(
                                                    color: Color.fromARGB(
                                                        255, 121, 121, 121)),
                                              ),
                                            ],
                                          ),
                                        ),
                                        InkWell(
                                          onTap: () {
                                            contorller.isSubwaySelected.value =
                                                !contorller
                                                    .isSubwaySelected.value;
                                          },
                                          child: Column(
                                            children: [
                                              Container(
                                                  width: 80,
                                                  height: 80,
                                                  padding:
                                                      const EdgeInsets.all(15),
                                                  decoration:
                                                      const BoxDecoration(
                                                    borderRadius:
                                                        BorderRadius.all(
                                                            Radius.circular(
                                                                50)),
                                                    color: Color.fromARGB(
                                                        255, 240, 240, 240),
                                                  ),
                                                  child: contorller
                                                          .isSubwaySelected
                                                          .value
                                                      ? Image.asset(contorller
                                                          .subwaySelectedIconPath)
                                                      : Image.asset(contorller
                                                          .subwayIconPath)),
                                              const SizedBox(
                                                height: 5,
                                              ),
                                              const Text(
                                                "地铁",
                                                style: TextStyle(
                                                    color: Color.fromARGB(
                                                        255, 121, 121, 121)),
                                              ),
                                            ],
                                          ),
                                        ),
                                        InkWell(
                                          onTap: () {
                                            contorller
                                                    .isbikeParkSelected.value =
                                                !contorller
                                                    .isbikeParkSelected.value;
                                          },
                                          child: Column(
                                            children: [
                                              Container(
                                                  width: 80,
                                                  height: 80,
                                                  padding:
                                                      const EdgeInsets.all(15),
                                                  decoration:
                                                      const BoxDecoration(
                                                    borderRadius:
                                                        BorderRadius.all(
                                                            Radius.circular(
                                                                50)),
                                                    color: Color.fromARGB(
                                                        255, 240, 240, 240),
                                                  ),
                                                  child: contorller
                                                          .isbikeParkSelected
                                                          .value
                                                      ? Image.asset(contorller
                                                          .bikeParkSelectedIconPath)
                                                      : Image.asset(contorller
                                                          .bikeParkIconPath)),
                                              const SizedBox(
                                                height: 5,
                                              ),
                                              const Text(
                                                "共享单车",
                                                style: TextStyle(
                                                    color: Color.fromARGB(
                                                        255, 121, 121, 121)),
                                              ),
                                            ],
                                          ),
                                        )
                                      ],
                                    ))
                                : Container();
                          })),
                    ],
                  ));
            }))
          ],
        );
      },
    );
  }
}

class CustomDrawerController extends GetxController {
  var drawerHeight = 230.0.obs;
  RxString currentLocation = '获取中...'.obs;
  RxBool playing = false.obs;
  final RxBool isDrawerOpen = true.obs;
  RxBool isBusSelected = false.obs;
  RxBool isSubwaySelected = false.obs;
  RxBool isbikeParkSelected = false.obs;
  RxBool showLineDetail = false.obs; //是否显示顶部菜单细节
  String busIconPath = "assets/img/icon/tool/icon_bus.png";
  String busIconSelectedPath = "assets/img/icon/tool/icon_bus_selected.png";
  String subwayIconPath = "assets/img/icon/tool/icon_subway.png";
  String subwaySelectedIconPath =
      "assets/img/icon/tool/icon_subway_selected.png";
  String bikeParkIconPath = "assets/img/icon/tool/icon_bike.png";
  String bikeParkSelectedIconPath =
      "assets/img/icon/tool/icon_bike_selected.png";
  RxBool isShowNavBtn = false.obs;
}
